<template>
	<view class="container">
		<fu-navbar title="出入库记录表" bgColor="#0f68f0" color="#fff" isBackText></fu-navbar>
		<view class="fixTop">
			<view class="tab-box">
				<view class="tab" :class="{'tab-active': tabCurrent == 0}" @click="tabChange(0)">进行中</view>
				<view class="tab" :class="{'tab-active': tabCurrent == 1}" @click="tabChange(1)">已完成</view>
			</view>
			<view class="flex align-center padding-lr-24 padding-tb-32" style="background-color: #f3f5f8;">
				<view class="search-wrap flex-1">
					<view class="search-box">
						<image class="search" src="../../../static/images/search-0.png" mode="widthFix"></image>
						<input placeholder="出库单号" placeholder-class="pla-ipt" class="ipt" v-model="orderCode"
							@confirm="search" />
						<view class="btn" @click="search">搜索</view>
					</view>
				</view>
				<!-- <image src="../../../static/images/scan2.png" class="scan flex-shrink"></image> -->
			</view>
			<view class="bg-f padding-24 flex align-center justify-between margin-b-32">
				<!-- <view class="flex align-center justify-between select-box" @click="toggleTab('linkage')">
					<view style="color: #959595;" v-if="!linkValue">选择仓库</view>
					<view style="color: #959595;" v-else>{{linkValue}}</view>
					<image src="../../../static/images/arrow-b-1.png" class="arrow-b" mode="widthFix"></image>
				</view>
				<view class="flex align-center justify-between select-box" @click="toggleTab('date')">
					<view style="color: #959595;" v-if="!date">指定日期</view>
					<view style="color: #959595;" v-else>{{date}}</view>
					<image src="../../../static/images/arrow-b-1.png" class="arrow-b" mode="widthFix"></image>
				</view> -->
				<view class="flex align-center justify-between select-box" @click="toggleTab('docu')">
					<view style="color: #959595;" v-if="!docuValue">单据类型</view>
					<view style="color: #959595;" v-else>{{docuName}}</view>
					<image src="../../../static/images/close.png" class="close" v-if="docuValue" @click.stop="onClose('docuValue')"></image>
					<image src="../../../static/images/arrow-b-1.png" class="arrow-b" v-else mode="widthFix"></image>
				</view>
				<view class="flex align-center justify-between select-box" @click="toggleTab('business')">
					<view style="color: #959595;" v-if="!businessValue">业务类型</view>
					<view style="color: #959595;" v-else>{{businessName}}</view>
					<image src="../../../static/images/close.png" class="close" v-if="businessValue" @click.stop="onClose('businessValue')"></image>
					<image src="../../../static/images/arrow-b-1.png" class="arrow-b" mode="widthFix" v-else></image>
				</view>
			</view>
		</view>
		
		<view style="margin-top: 390rpx;"></view>
		<view class="list">
			<view class="item bg-f padding-lr-24 margin-b-24" v-for="(item, index) in list" :key="index"
				@click="toDetail(item)">
				<view class="flex align-center justify-between padding-tb-24 border-b-c9">
					<view class="fs-30">{{item.orderCode}}</view>
					<view class="fs-28" style="color: #027DB4;" v-if="tabCurrent == 0">
						{{item.orderType == 0 ? '待入库' : '待出库'}}
					</view>
					<view class="fs-28" style="color: #027DB4;" v-if="tabCurrent == 1">
						{{item.orderType == 0 ? '已入库' : '已出库'}}
					</view>
				</view>
				<view class="padding-tb-24">
					<!-- <view class="fs-26 con margin-b-10">仓库：空压站-1楼-401</view> -->
					<view class="fs-26 con margin-b-10" v-if="item.businessCode">关联单据：{{item.businessCode}}</view>
					<view class="fs-26 con margin-b-10">出库备件：{{item.partNum}}</view>
					<view class="fs-26 con margin-b-10">出库人：{{item.operationEmployeeName}}</view>
					<view class="fs-26 flex align-center justify-between" style="color: rgba(127, 127, 127, 0.8);">
						<text>{{item.inOutType}}</text>
						<text>{{item.operationTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" v-if="list.length > 5"></uni-load-more>

		<!-- 空数据显示 -->
		<fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>

		<!-- 选择日期 -->
		<w-picker mode="date" fields="day" :value="dateValue" themeColor="#30a3e0" @confirm="onConfirm($event, 'date')"
			ref="date"></w-picker>
		<!-- 入库仓库 -->
		<w-picker mode="linkage" :options="linkList" themeColor="#30a3e0" :defaultProps="linkProps" default-type="name"
			@confirm="onConfirm($event, 'linkage')" ref="linkage"></w-picker>
		<w-picker mode="selector" :options="docuTypes" themeColor="#30a3e0" :defaultProps="typeProps"
			default-type="dictName" @confirm="onConfirm($event, 'docu')" ref="docu"></w-picker>
		<w-picker mode="selector" :options="businessOptions" themeColor="#30a3e0" :defaultProps="typeProps"
			default-type="dictName" @confirm="onConfirm($event, 'business')" ref="business"></w-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrent: 0,
				dateValue: '',
				date: '',
				page: 1,
				status: 'more',
				list: [],
				isInit: false,
				orderCode: '',
				linkProps: {
					value: 'id',
					label: 'name',
					children: 'children'
				},
				linkList: [],
				linkValue: null,
				docuTypes: [{
					dictValue: '0',
					dictName: '入库单'
				}, {
					dictValue: '1',
					dictName: '出库单'
				}],
				docuValue: "",
				docuName: "",
				businessValue: "",
				businessName: "",
				businessOptions: [],
				typeProps: {
					value: 'dictValue',
					label: 'dictName'
				},
			}
		},
		onLoad() {
			// this.getList();
			this.selectTypeFn();
			this.getPartLink();
		},
		onShow() {
			this.search();
		},
		onPullDownRefresh() {
			this.search()
		},
		onReachBottom() {
			if (this.status == 'more') {
				this.getList();
			}
		},
		methods: {
			onClose(value) {
				this[value] = ''
				this.search();
			},
			selectTypeFn() {
				this.$api.post(global.apiUrls.selectType, {
					dictTypeCode: 'TYPE_PART_IN_TYPE,TYPE_PART_OUT_TYPE'
				}).then(res => {
					if (res.data.code == 9100) {
						this.businessOptions = res.data.info
					}
				})
			},
			tabChange(e) {
				this.tabCurrent = e
				this.search();
			},
			toggleTab(ref) {
				this.$refs[ref].show();
			},
			onConfirm(e, type) {
				if (type == 'date') {
					this.date = e.value
				} else if (type == 'linkage') {
					this.linkValue = e.result
				} else if (type == 'docu') {
					this.docuValue = e.value
					this.docuName = e.result
				} else if (type == 'business') {
					this.businessValue = e.value
					this.businessName = e.result
				}
				this.search()
			},
			// 查询备件仓库
			getPartLink() {
				this.$api.post(global.apiUrls.selectPartWarehouseLink).then(res => {
					if (res.data.code == 9100) {
						this.linkList = res.data.info
					}
				})
			},
			toDetail(e) {
				uni.navigateTo({
					url: `/pages/spare-parts/out-storage/index?id=${e.id}&orderType=${e.orderType}`
				})
			},
			getList() {
				if (this.status != 'more') return;
				this.status = 'loading';
				// state 0已完成，1未完成，2部分完成
				let state = this.tabCurrent == 0 ? 1 : 0
				this.$api.post(global.apiUrls.selectPartOrder, {
					pageNum: this.page,
					pageSize: 10,
					orderCode: this.orderCode,
					state: state,
					orderType: this.docuValue,
					inOutType: this.businessValue
				}).then(res => {
					if (res.data.code == 9100) {
						let total = res.data.info.total
						let data = res.data.info.rows
						if (this.page == 1) this.list = [];
						this.list = this.list.concat(data)
						if (this.list.length < total) {
							this.status = 'more';
							this.page++;
						} else {
							this.status = 'noMore';
						}
					}
					this.isInit = true;
					uni.stopPullDownRefresh();
				}).catch(() => {
					uni.stopPullDownRefresh();
				})
			},
			search() {
				this.status = 'more';
				this.page = 1;
				this.getList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f3f5f8;
	}
	
	.fixTop{
		position: fixed;
		width: 100%;
		top: 150rpx;
		background: #fff;
		z-index: 99;
	}

	.tab-box {
		display: flex;
		height: 88rpx;
		align-items: center;
		justify-content: center;
		background-color: #fff;

		.tab {
			width: 33%;
			text-align: center;
			position: relative;
			font-size: 28rpx;
			height: 88rpx;
			line-height: 88rpx;
			color: #7F7F7F;
		}

		.tab-active {
			color: #333;

			&::after {
				width: 82rpx;
				height: 6rpx;
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				background-color: #555;
			}
		}
	}

	.search-wrap {
		.search-box {
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 8rpx;
			padding: 8rpx 0;

			.search {
				width: 42rpx;
				margin: 0 20rpx;
				flex-shrink: 0;
			}

			.ipt {
				color: #333;
				font-size: 28rpx;
				flex: 1;
			}

			.pla-ipt {
				color: #b6b6b6;
			}

			.btn {
				flex-shrink: 0;
				width: 128rpx;
				height: 66rpx;
				border-radius: 66rpx;
				background-color: #1c91ff;
				color: #fff;
				text-align: center;
				line-height: 66rpx;
				font-size: 28rpx;
				margin-right: 8rpx;
			}
		}
	}

	.scan {
		width: 68rpx;
		height: 68rpx;
		margin-left: 24rpx;
	}

	.select-box {
		width: 300rpx;
		height: 52rpx;
		border-radius: 18rpx;
		background-color: #d7d7d7;
		font-size: 28rpx;
		box-sizing: border-box;
		padding: 0 16rpx;
		
		.close {
			width: 32rpx;
			height: 32rpx;
		}

		.arrow-b {
			width: 26rpx;
		}
	}

	.list {
		.item {
			border-radius: 20rpx;

			.con {
				color: rgba(51, 51, 51, 0.8);
			}
		}
	}
</style>